<template>
  <!--1.文本 2.数值 3.日期 4.小时分钟 5.时间 6.下拉选项 7.文件 8.是否-->
  <!--<el-form-item  :label="item.formName +':'" :rules="Rules">-->
  <el-form-item  :label="item.formName +':'" :required="item.required">

    <!--1.文本 2.数值-->
    <el-input v-if="item.formTypeCode==1 || item.formTypeCode==2"
              v-model="item.defaultValue"
              :disabled="item.readOnly==1"
              placeholder="请输入">
    </el-input>

    <!--3.日期-->
    <el-date-picker v-if="item.formTypeCode==3"
                      v-model="item.defaultValue"
                    type="date" format="yyyy-MM-dd"
                    placeholder="请选择">
    </el-date-picker>

    <!--4.小时分钟-->
    <el-time-picker v-if="item.formTypeCode==4"
                    format="hh:mm:ss"
      v-model="item.defaultValue"
      placeholder="请选择">
    </el-time-picker>

    <!--5.时间-->
    <el-date-picker v-if="item.formTypeCode==5"
      v-model="item.defaultValue"
      type="datetime"
      placeholder="请选择">
    </el-date-picker>

    <!--6.下拉选项-->
    <el-select v-if="item.formTypeCode==6" :clearable="true"
               v-model="item.defaultValue"
               placeholder="请选择">
        <el-option  v-for="it in item.options" :label="it.name" :value="it.id" :key="it.id"></el-option>
    </el-select>

  </el-form-item>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    Rules () {
      const { item: { rules } } = this
      const { item: { required } } = this
      const { item: { formName } } = this
      console.log(rules)
      if (rules === undefined || rules === null) return undefined

      const R = []
      if (required) {
        var obj = { required: required, message: formName + '不能为空' }
        R.push(obj)
      }
      rules.forEach(rule => {
        if (rule.checkRule) {
          let validcodeName = (rule, value, callback) => {
            let reg = rule.checkRule
            if (!reg.test(value)) {
              callback(new Error(rule.message))
            } else {
              callback()
            }
          }
          // const validator = (rule, value, callback) => {
          // eslint-disable-next-line
            // request('/api/validate', 'POST', {
          //   key: rule2.field,
          //   value,
          //   sql: rule.sql.replace(/{key}/gi, rule2.field)
          // })
          //   .then(res => {
          //     // eslint-disable-next-line
          //     callback(!res || undefined);
          //   })
          //   .catch(err => {
          //     this.$message.error(err.message)
          //     // eslint-disable-next-line
          //     callback(false);
          //   })
          //   console.log('enter' + rule)
          //   console.log('value' + value)
          //   var reg = rule.checkRule
          //   callback(reg.test(value))
          // }

          R.push({ validator: validcodeName, trigger: 'blur' })
        } else {
          R.push(rule)
        }
      })

      console.log('rrrr===' + JSON.stringify(R))
      return R
    }
  },
  mounted () {
  }
}
</script>
